<template>
    <div class="playListItems">
        <div class="item-top">
            <img :src="props.src" alt="">
            <div class="button">
                <span class="icon-play" @click="getSingId(id)"></span>
                <span class="listenIcon"></span>
                <span class="singNum">{{ count }}万</span>
            </div>
        </div>
        <div class="item-bottom">
            <a href="" :title="props.title">{{ props.title }}</a>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import playerStore from '@/store/modules/player';
const props = defineProps({
    title: String,
    src: String,
    playCount: Number,
    id: Number
})
const count = computed(() => {
    return (props.playCount as number / 10000).toFixed(2)
})
let playerUseStore = playerStore()
const getSingId = async (id: number) => {
    await playerUseStore.getSingAl(id,50)
}

</script>

<style scoped lang="less">
.playListItems {
    width: 140px;

    .item-top {
        width: 140px;
        height: 140px;
        position: relative;

        img {
            width: 100%;
            height: 100%;
        }

        .button {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 27px;
            background-position: 0 -537px;
            color: #ccc;
            background: url(../../assets/images/coverall.png) no-repeat;

            .icon-play {
                display: block;
                position: absolute;
                right: 10px;
                bottom: 5px;
                width: 16px;
                height: 17px;
                background-position: 0 0;
                background: url(../../assets/images/iconall.png) no-repeat;
                cursor: pointer;

                &:hover {
                    background-position: 0 -60px;
                }
            }

            .listenIcon {
                width: 14px;
                height: 11px;
                margin: 9px 5px 9px 10px;
                display: block;
                float: left;
                background: url(../../assets/images/iconall.png) no-repeat;
                background-position: 0 -24px;
            }

            .singNum {
                float: left;
                margin: 10px 0 0 0;
                font-size: 12px;
            }
        }
    }

    .item-bottom {
        margin: 8px 0 3px;
        font-size: 14px;

        a {
            color: #000;
            line-height: 1.4;
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}</style>